<template>
    <div class="white-box">
        <cell-tip show-more :datas="tipArrs" />
        <div class="sms-one">
            当前可用短信数量：<strong>{{ sms_nums }}</strong
            >条
            <el-button type="primary" size="small" @click="clickRecharge">立即充值</el-button>
            <!-- <el-popover placement="right" content="您好，暂不支持用户线上充值，请联系您的服务经理进行充值。" :width="280" trigger="click">
                <template #reference>
                    <el-button type="primary" size="small">立即充值</el-button>
                </template>
            </el-popover> -->
        </div>
        <div class="table-box">
            <div class="table-head flexs">
                <div class="table-td td-one">消息类别</div>
                <div class="table-td td-two">推送规则</div>
                <div class="table-td td-three">短信通知</div>
            </div>
            <div class="table-body" v-for="(item, index) in arr_data" :key="index">
                <div class="td-one table-body__title">{{ item.type_name }}</div>
                <div class="td-two">
                    <div class="table-sub" v-for="(sub, subIndex) in item.children" :key="subIndex">
                        <div class="table-sub__title">{{ sub.title }}</div>
                        <div class="td-three table-sub__oper">
                            <el-checkbox
                                :checked="sub.status == 1"
                                :true-label="1"
                                :false-label="0"
                                label="启用"
                                data-sub="sub"
                                @change="(val) => changeCheck(val, sub)"
                            />
                            <el-popover placement="top" title="短信内容预览" :width="380" trigger="hover" :content="sub.content">
                                <template #reference>
                                    <span class="table-sub__oper-view">预览</span>
                                </template>
                            </el-popover>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import { useRouter } from "vue-router"
import GoBack from "@components/GoBack.vue"
import CellTip from "@components/cell-tip.vue"

const router = useRouter()
const { proxy } = getCurrentInstance()
const tipArrs = ["1、使用短信通知，需先购买短信包服务，充值短信条数。", "2、短信可能会有一定时间的延迟，具体看短信运营商的网络情况"]

onMounted(() => {
    getSMSNums()
})

// 获取短信剩余
const sms_nums = ref(0)
function getSMSNums() {
    proxy.$axios
        .get("sms/capital")
        .then((res) => {
            if (res.data.code == 0) {
                sms_nums.value = res.data.data.remain
                getDetail()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
const clickRecharge = () => {
    router.push("/Marketing/RechargeSMS")
}

// 设置消息
const changeCheck = (val, sub) => {
    proxy.$axios
        .post("config/smsConfig", {
            tmpl_id: sub.tmpl_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                let text = val == 1 ? '设置成功' : '取消成功'
                proxy.$message({ message: text, type: "success" })
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 获取消息设置
const arr_data = ref([])
function getDetail() {
    proxy.$axios
        .get("config/smsConfig")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                arr_data.value = result
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "TransactionSetup",
}
</script>

<style lang="less" scoped>
.table-box {
    border-radius: @radius-md;
    word-wrap: break-word;
    word-break: break-all;
    border: 1px solid @gray-4;
    border-bottom: 0;
    width: 100%;
    margin: @margin-lg 0px;
    .table-td {
        padding: 8px 15px;
        border-bottom: 1px solid @gray-4;
        color: @gray-8;
        font-weight: bold;
    }
    .td-one {
        flex: none;
        width: 280px;
    }
    .td-two {
        flex: 1;
    }
    .td-three {
        flex: none;
        width: 280px;
    }
    .table-body {
        display: flex;
        .td-two {
            border-left: 1px solid @gray-4;
        }
    }
    .table-body__title {
        padding: 8px 15px;
        font-size: @font-size-sm;
        border-bottom: 1px solid @gray-4;
        color: @gray-7;
        display: flex;
        align-items: center;
    }
    .table-sub {
        display: flex;
        align-items: center;
        border-bottom: 1px solid @gray-4;
        font-size: @font-size-sm;
        color: @gray-7;
        &:hover {
            background-color: @gray-1;
        }
        .table-sub__title {
            flex: 1;
            border-right: 0;
            padding: 10px 15px;
        }
        .table-sub__oper {
            padding: 10px 15px;
            display: flex;
            align-items: center;
            .table-sub__oper-view {
                color: @themes;
                margin-left: @margin-mdl;
                cursor: pointer;
                height: 18px;
            }
        }
    }
    :deep(.el-checkbox) {
        height: auto;
        .el-checkbox__label {
            font-size: @font-size-sm;
        }
    }
}
.sms-one {
    position: relative;
    min-height: 24px;
    padding: 15px 20px;
    background: @gray-1;
    overflow: hidden;
    border-radius: @radius-sm;
    margin-bottom: @margin-mdl;
    strong {
        color: @red;
        font-size: @line-height-lg;
        margin-right: @margin-base;
    }
    .el-button {
        margin-left: @margin-sm;
    }
}
</style>
